<template>
  <div class="authentication">
    <div class="com-top-nav">
      <van-nav-bar
        title="报名人信息"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="personCommon">
      <div class="info-header">
        <img :src="this.mine.headimgurl" alt="">
      </div>
      <div class="verified-sign">{{this.isVerified[this.mine.isVerify]}}</div>
      <div><h2>{{this.mine.nickname}}</h2></div>
      <div class="EducationCatTitle">教育信息</div>
      <div v-for="(item,i) in edu_bgs" :key= "'edu' + i">
        <div class="catEduDiv">
          <div class="EducationItem" v-bind:text-content.prop="getEducationItem(item.school,item.speciality,item.academic)"></div>
        </div>
        <br />
      </div>
      <div class="aboutCatTitle">关于我</div>
      <div class="catAboutDiv">
        <div class="aboutDiv">{{this.userInfo.asm}}</div>
      </div>
      <div class="companyCatTitle">工作经历</div>
      <div v-for="(item,i) in works" :key="'wok' + i">
        <div class="catDiv">
          <div class="companyName">{{item.company}}</div>
          <div class="companyPosition" v-bind:text-content.prop="getJobPeriod(item.position,item.start_time, item.end_time)"></div>
          <div class="companyDes">{{item.des}}</div>
        </div>
        <br />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mine: [],
      isVerified: ["未认证", "已认证"],
      works: [],
      edu_bgs: [],
      userInfo: []
    };
  },
  mounted() {},
  created() {
    this.init();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    init() {
      this.axios
        .get("/api/mine", {
          params: {
            uid: this.$route.query.uid
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.mine = res.data.data;
        });
      this.axios
        .get("/api/user/job/show", {
          params: {
            uid: this.$route.query.uid
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.works = res.data.data;
        });
      this.axios
        .get("/api/user/edu_bg/show", {
          params: {
            uid: this.$route.query.uid
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.edu_bgs = res.data.data;
        });        
      this.axios
        .get("/api/user/info", {
          params: {
            uid: this.$route.query.uid
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.userInfo = res.data.data;
        });        
    },
    getJobPeriod(position, start, end){
      let result = "";
      if(position&&start&&end){      
        start = start.substring(0, start.lastIndexOf("-")).replace(/-/g, ".");
        end = end.substring(0, end.lastIndexOf("-")).replace(/-/g, ".");
        result = position + " | " + start + " - " + end;
      }
      return result;
    },
    getEducationItem(school,speciality,academic){
      let result = "";
      if(school&&speciality&&academic){      
        result = school + " | " + speciality + " | " + academic;
      }
      return result;      
    }
  }
};
</script>

<style scoped lang="less" type="text/less">
@import url("../../../static/style/var");
.is-require {
  &::before {
    content: "*";
    position: absolute;
    left: 7px;
    font-size: 14px;
    color: #f44;
  }
}
.button {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 30px;
}

.authentication {
  .personCommon {
    display: block;
    font-size: 20px;
    text-align: left;
    .info-header {
      text-align: center;
      padding: 75px 0 10px 0;
      margin-top: 20px;
      img {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 90px;
        height: 90px;
        border-radius: 50%;
      }
      .info-name {
        color: @font-dault-color;
        font-size: @title-font-size; /*px*/
      }
      .info-sign {
        color: @weak-tips-color;
        font-size: @normal-font-size; /*px*/
        line-height: 1.5;
      }
    }
    .verified-sign {
      display: block;
      background: #e64545;
      font-size: 6px;
      padding: 0px 0px;
      margin: 0px 135px;
      text-align: center;
      border-radius: 3px;
      color: #fff;
    }
    .companyCatTitle {
      padding: 15px 0px;
      margin: 0px;
      font-weight: bold;          
      color: rgba(226, 116, 142, 1);
    }
    .aboutCatTitle {
      padding: 15px 0px;
      margin: 0px;
      font-weight: bold;          
      color: rgba(255, 141, 26, 1);
    }
    .EducationCatTitle{
      padding: 15px 0px;
      margin: 0px;
      font-weight: bold;          
      color: rgba(42, 130, 228, 1);
    }
    .catDiv {
      margin: 0 0 0 10px;
      padding: 0 0 0 5px;
      border-left-style: solid;
      border-left-width: 5px;
      border-left-color: rgba(226, 116, 142, 1);
      .companyName {
        color: rgba(102, 102, 102, 1);
        padding: 0 0 15 0px;
        margin: 0px;
        font-weight: bold;
      }
      .companyPosition {
        color: rgba(164, 164, 164, 1);
        padding: 0 0 15 0px;
        margin: 0px;
        font-weight: bold;
      }
      .companyDes {
        color: rgb(32, 32, 32);
        padding: 0 0 15 0px;
        margin: 0px;
      }
    }
    .catEduDiv {
      margin: 0 0 0 10px;
      padding: 0 0 0 5px;
      border-left-style: solid;
      border-left-width: 5px;
      border-left-color: rgba(42, 130, 228, 1);
      .EducationItem{
        font-weight: normal;
      }
    }
    .catAboutDiv{
      margin: 0 0 0 10px;
      padding: 0 0 0 5px;
      border-left-style: solid;
      border-left-width: 5px;
      border-left-color: rgba(255, 141, 26, 1);    
    }    
  }
}
</style>
